<!DOCTYPE html>
<html>
<head>

        <meta charset="utf-8" />

        <title>蒙太奇马赛克</title>

        <link href="bootstrap.css" rel="stylesheet">

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="/lib/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="/lib/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="/lib/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


    <style>
        html {width: 100%;}
        body {width: 100%;margin:0;padding:0;
            /*background-color: black;*/
        }

        ::-webkit-scrollbar{
            display:none;
        }


        .rotate {
            -webkit-transform: rotate(-90deg);
            -moz-transform: rotate(-90deg);
            -ms-transform: rotate(-90deg);
            -o-transform: rotate(-90deg);
            transform: rotate(-90deg);

            /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
            -webkit-transform-origin: 50% 50%;
            -moz-transform-origin: 50% 50%;
            -ms-transform-origin: 50% 50%;
            -o-transform-origin: 50% 50%;
            transform-origin: 50% 50%;

            /* Should be unset in IE9+ I think. */
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
        }

        .mosaicDesc{
            color:white;
            position:absolute;
            right:0pt;
            top:0pt;
            bottom:0pt;
            font-family: "楷体","楷体_GB2312";
            font-size:60pt;
            padding-top:280pt;

        }


        .fishes
        {
            position:absolute;
            top: 0px;
            left: 0px;
            z-index: 1;
        }
        .fish
        {
            position:absolute;
            top: 0px;
            left: 0px;
            z-index: 2;
        }

	</style>


	<script src="/lib/socket.io.js"></script>
    <script src="/lib/moment.min.js"></script>
    <script src="/lib/jquery-2.1.4.min.js"></script>
    <script src="/js/app.js"></script>

	<script>

		var socket =  io.connect(ServerUrl);

		socket.on('connect', function() {
			console.log("Client has connected to the server!");
		});

		var blankCount = 0;
		var blankInterval = setInterval(function () {
            blankCount += 1;
            if(blankCount % 2 == 0){
                $('#img_blank').hide();
            }else{
                $('#img_blank').show();
            }
        },500);

        var zoomInterval;

        socket.on('mosaic', function(data) {
            clearInterval(zoomInterval);

            $('#img_mosaic').attr('src',ResUrl + data.mosaic);
            $('#img_blank').attr('src',ResUrl + data.blank);

            var zoomCount = 0;
            var zoomNum = 80;

            var maxW = 200;
            var maxH = 200;
            zoomInterval = setInterval(function(){
                for(var i = 0 ;i < data.faces.length; ++i){
                    if(zoomCount > zoomNum){
                        clearInterval(zoomInterval);
                        $('#profile' + (i+1)).hide();
                        continue;
                    }

                    $('#profile' + (i+1)).attr('src',ResUrl +data.faces[i].face_photo);

                    var x = $("#img_mosaic").width()*data.faces[i].x/4096 - 105;
                    var y = $("#img_mosaic").height()*data.faces[i].y/2160;
                    var w = $("#img_mosaic").height()*data.faces[i].width/2160;
                    var h = $("#img_mosaic").width()*data.faces[i].height/4096;

                    var maxX = w/2 + x - maxW/2;
                    var maxY = h/2 + y - maxH/2;

                    $('#profile' + (i+1)).show();
                    $('#profile' + (i+1)).css('left', maxX + (x - maxX)/zoomNum*zoomCount);
                    $('#profile' + (i+1)).css('top', maxY + (y - maxY)/zoomNum*zoomCount);


                    $('#profile' + (i+1)).css('width', maxW - (maxW-w)/zoomNum*zoomCount);
                    $('#profile' + (i+1)).css('height', maxH - (maxH-h)/zoomNum*zoomCount);

                }

                zoomCount+= 1;

            },50);



		});

		socket.on('disconnect', function() {
            console.log("The client has disconnected!");
		});

        function sendDisconnect() {
                socket.disconnect();
        }

		function sendMessage() {


            var jsonObject = {};
            socket.emit('chatevent', jsonObject);
		}

        $(function() {

            // $("#img_mosaic").width(1066);
            // $("#img_mosaic").height(900);
        });

	</script>
</head>

<body style="background-color:black">


<div>
        <img id="img_mosaic" class="fishes" width="1517" height="800" style="margin-left:-80pt;" src="http://localhost:8088/res/2018-05-11_20.17.46_mosaic_rotate.jpg">
        <img id="img_blank"  class="fish" width="1517" height="800" style="margin-left:-80pt;" src="http://localhost:8088/res/2018-05-11_20.17.46_mosaic_blank.png">


</div>

<img id="profile1" style="position:absolute;background-color:transparent;text-align: center;z-index: 3;"></img>
<img id="profile2" style="position:absolute;background-color:transparent;text-align: center;z-index: 3;"></img>
<img id="profile3" style="position:absolute;background-color:transparent;text-align: center;z-index: 3;"></img>
<img id="profile4" style="position:absolute;background-color:transparent;text-align: center;z-index: 3;"></img>
<img id="profile5" style="position:absolute;background-color:transparent;text-align: center;z-index: 3;"></img>

<div id="videoDesc" class="mosaicDesc rotate" style="background-color:transparent;text-align: center;z-index: 4;">

    You&nbsp;are&nbsp;me
</div>

</body>

</html>
